<template>
  <div class="m-theFollowUp">
    <div class="m-searchPanel m-searchPanelA">
      <div class="layout-1"><span class="leftLine"></span>查询条件</div>
      <div class="layout-2">
        <el-form :model="searchForm" class="demo-form-inline" :inline="true">
          <el-row :gutter="30">
            <el-col :span="6">
              <el-form-item label="交易平台">
                <el-select v-model="searchForm.platform" placeholder="请选择" clearable>
                  <el-option label="GTS2" value="GTS2"></el-option>
                  <el-option label="MT4" value="MT4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="input-with-select">
                <el-input v-model.trim="searchForm.inputFH" placeholder=" " clearable>
                  <el-select v-model="searchForm.typeinputFH" slot="prepend" class="selectInputType" style="width: 120px;">
                    <el-option label="订单号" value="orderId"></el-option>
                    <el-option label="成交单号" value="dealId"></el-option>
                    <el-option label="持仓单号" value="positionId"></el-option>
                  </el-select>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7" class="searchBtns" :offset="5">
              <el-button type="primary" icon="el-icon-search" @click="search" :loading="dataListLoading">查询</el-button>
              <el-button type="primary" plain icon="el-icon-refresh" @click="reset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="m-dataList">
      <el-table
        :data="dataList"
        style="width: 100%"
        @sort-change="tableSortBy"
        v-loading="dataListLoading"
        element-loading-text="loading..."
        max-height="800"
        ref="dataList"
      >
        <el-table-column
          prop="account_no"
          width="120"
          label="模拟账号">
        </el-table-column>
        <el-table-column
          prop="platform"
          label="交易平台"
          width="80">
        </el-table-column>
        <el-table-column
          prop="symbol"
          label="产品"
          sortable="custom"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="report_type"
          label="开/平"
          width="80">
        </el-table-column>
        <el-table-column
          prop="open_direction"
          label="买/卖"
          width="80">
          <template slot-scope="scope">
            <span>{{scope.row.report_type == 'OPEN' ? scope.row.open_direction : scope.row.close_direction}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="order_p_id"
          label="订单号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="order_type"
          label="订单类型"
          width="80">
          <template slot-scope="scope">
            {{scope.row.order_type | orderType}}
          </template>
        </el-table-column>
        <el-table-column
          prop="order_request_price"
          label="订单价格"
          align="right"
          :formatter="countDateMoneyFormat"
          width="100">
        </el-table-column>
        <el-table-column
          prop="order_request_volume"
          label="订单手数"
          width="80">
        </el-table-column>
        <el-table-column
          prop="channel"
          label="订单途径"
          width="100">
          <template slot-scope="scope">
            {{scope.row.channel | channel}}
          </template>
        </el-table-column>
        <el-table-column
          prop="deal_p_id"
          label="成交单号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="trade_price"
          label="成交价格"
          align="right"
          :formatter="countDateMoneyFormat"
          width="80">
        </el-table-column>
        <el-table-column
          prop="trade_volume"
          label="成交手数"
          sortable="custom"
          width="100">
        </el-table-column>
        <el-table-column
          prop="trade_time"
          :formatter="countTimeFormat"
          label="成交时间"
          sortable="custom"
          width="160">
        </el-table-column>
        <el-table-column
          prop="position_p_id"
          label="持仓单号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="takeprofit"
          label="止盈"
          align="right"
          :formatter="countDateMoneyFormat"
          width="80">
        </el-table-column>
        <el-table-column
          prop="stoploss"
          label="止损"
          align="right"
          :formatter="countDateMoneyFormat"
          width="80">
        </el-table-column>
        <el-table-column
          prop="related_order_id"
          label="关联单号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="account_currency"
          label="账户货币"
          width="80">
        </el-table-column>
        <el-table-column
          prop="commission"
          label="佣金"
          align="right"
          :formatter="countDateMoneyFormat"
          width="80">
        </el-table-column>
        <el-table-column
          prop="swap"
          label="利息"
          align="right"
          :formatter="countDateMoneyFormat"
          width="80">
        </el-table-column>
        <el-table-column
          prop="profit"
          label="盈亏"
          align="right"
          :formatter="countDateMoneyFormat"
          width="80">
        </el-table-column>
        <el-table-column
          prop="stopout_margin"
          label="斩仓保证金"
          align="right"
          :formatter="countDateMoneyFormat"
          width="100">
        </el-table-column>
        <el-table-column
          prop="stopout_equity"
          label="账户净值"
          align="right"
          :formatter="countDateMoneyFormat"
          width="100">
        </el-table-column>
      </el-table>
    </div>
    <div class="m-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes=pagination.pageSizeList
        :current-page=pagination.pageNo
        :page-size=pagination.pageSize
        layout="total, sizes, prev, pager, next"
        :total=pagination.total>
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import * as Utils from '@/utils'
  import * as LeadsAPI from '@/Api/lead';
  import * as RealaccountAPI from '@/Api/realaccount'
  export default {
    name: 'TheDemoBuyList',
    data () {
      return {
        searchForm: {
          platform: '',
          inputFH: '',
          typeinputFH: 'orderId',
        },
        copySearchForm:{},
        pagination: Utils.commonPagination(),
        dataList: [],
        dataListLoading: false,
        sortInfo:{},
        ajaxSearchParams:{}
      }
    },
    props: ['type'],
    computed: {
      queryId(){
        if(this.type == '1') {
          return this.$route.params.id.split('_')[2]
        } else  {
          return this.$route.params.id.split('_')[1]
        }
      }
    },
    filters: {
      'orderType'(val){
        if (val == '1') {
          return '市价'
        }
        else if (val == '2') {
          return '限价'
        }
        else if (val == '4') {
          return '止损'
        }
        else if (val == '8') {
          return '市价'
        }
        else if (val == '16') {
          return '止损'
        }
        else if (val == '32') {
          return '止盈'
        }
        else {
          return val;
        }
      },
      'channel'(val){
        if (val == '1') {
          return 'PC'
        }
        else if (val == '2') {
          return 'IPHONE'
        }
        else if (val == '3') {
          return 'ANDROID'
        }
        else if (val == '4') {
          return 'WEB'
        }
        else if (val == '5') {
          return 'MT4'
        }
        else {
          return val;
        }
      }
    },
    methods: {
      reset(){
        this.searchForm ={...this.copySearchForm}
      },
      handleSizeChange(size) {
        this.pagination.pageSize = size;
        if (this.pagination.pageNo == 1) {
          this.queryList();
        } else {
          this.pagination.pageNo = 1;
        }
      },
      handleCurrentChange(index) {
        this.pagination.pageNo = index;
        this.queryList();

      },
      search(){
        this.ajaxSearchParams = Utils.searchParamsFormat(this.searchForm);
        if (this.pagination.pageNo == 1) {
          this.queryList();
        } else {
          this.pagination.pageNo = 1;
        }
      },
      tableSortBy(data) {
        if (!data.order) {
          return;
        }
        this.sortInfo.orderParam = data.prop;
        this.sortInfo.orderType = data.order.substr(0, data.order.length - 6);
        if (this.pagination.pageNo == 1) {
          this.queryList();
        } else {
          this.pagination.pageNo = 1;
        }
      },
      queryList(){
        /*
         * 1、lead-demo-营销系统活动
         * 2、真实帐号-demo-营销系统活动
         * 3、真实帐号-交易平台-参加活动-营销系统活动
         *
         * */
        this.dataListLoading = true;
        if (this.$refs.dataList) {
          this.$refs.dataList.bodyWrapper.scrollTop = 0;
        }
        let ajaxAddress = null;
        if (this.type == '1') {
          ajaxAddress = RealaccountAPI.realaccountInfo3_2;
        }
        else if (this.type == '2') {
          ajaxAddress = LeadsAPI.leadInfo3_3;
        } else {
          console.log('参数有误，代码要蹦了');
          return
        }
        ajaxAddress(Object.assign({
          queryId: this.queryId,
          pageSize: this.pagination.pageSize,
          pageNo: this.pagination.pageNo - 1
        }, this.ajaxSearchParams,this.sortInfo))
          .then(res => {
            this.dataListLoading = false;
            if (res.code != '0') {
              this.$notify.warning({
                title: '温馨提示',
                message: res.msg
              })
              return
            }
            this.dataList = res.data.content;
            this.pagination.total = res.data.totalElements;
          })
          .catch(error => {
            this.dataListLoading = false;
            console.log(error)
          })
      },
      countTimeFormat(row, column){
        return Utils.countDateTimeFormat(row[column.property])
      },
      countDateMoneyFormat(row, column){
        return Utils.countDateMoneyFormat(row[column.property])
      },
    },
    created(){
      this.copySearchForm ={...this.searchForm}
      this.search();
    }
  }
</script>

<style scoped lang="scss">
</style>
